<template>
  <div class="search-box">
    <p>
      <el-input
        size="mini"
        clearable
        placeholder="搜索"
        class="input"
        v-model="searchValue"
      >
        <i
          slot="prefix"
          class="el-input__icon el-icon-search"
        ></i>
      </el-input>
      <el-button
        v-if="actived === 1"
        class="plus-btn"
        size="mini"
        icon="el-icon-plus"
      ></el-button>
    </p>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class Search extends Vue {
  @Prop({ required: true }) public actived!: number
  public searchValue: string = ''
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 60px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  p {
    line-height: 60px;
    display: flex;
    flex: 1;
    .input {
      line-height: 1;
    }
    .el-button {
      &:hover,
      &:active,
      &:focus {
        border: 0.1px #ccc solid;
        background-color: transparent;
        color: inherit;
      }
    }
    .plus-btn {
      padding: 7px;
      margin-left: 10px;
      background-color: transparent;
    }
  }
}
</style>
